<template>
  <div class="dashboard-panel">
    <div class="dashboard-header2">
      <span class="dashboard-title">采购订单统计</span>
      <span class="dashboard-logo">WMS</span>
    </div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-title">订单品类 <el-icon class="info-icon">
              <InfoFilled />
            </el-icon></div>
          <div class="stat-value">3<span class="stat-unit">种</span></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-title">总订单数量<el-icon class="info-icon">
              <InfoFilled />
            </el-icon></div>
          <div class="stat-value">4350 <span class="stat-unit">单</span></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-title">订单金额<el-icon class="info-icon">
              <InfoFilled />
            </el-icon></div>
          <div class="stat-value">814521<span class="stat-unit">元</span></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-title">入库数量<el-icon class="info-icon">
              <InfoFilled />
            </el-icon></div>
          <div class="stat-value">536 <span class="stat-unit">单</span></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card">
          <div class="chart-title">采购订单趋势</div>
          <v-chart :option="chartOption" autoresize style="height:320px;" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card">
          <div class="chart-title">采购金额趋势 <el-icon class="info-icon">
              <InfoFilled />
            </el-icon></div>
          <v-chart :option="amountChartOption" autoresize style="height:320px;" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import VChart from 'vue-echarts'
const amountChartOption = ref({
  tooltip: {
    trigger: 'axis', formatter: (params: any) => {
      const p = params[0];
      return `${p.axisValue}<br/>${p.seriesName}: <b>${p.data.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</b> 元`;
    }
  },
  legend: { data: ['产品成本合计/元'] },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['2024年03月', '2024年04月', '2024年05月', '2024年06月', '2024年07月', '2024年08月', '2024年09月']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: (value: any) => value.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
    }
  },
  series: [
    {
      name: '产品成本合计/元',
      type: 'line',
      smooth: true,
      data: [161564.46, 396157.50, 252313.77, 98410.50, 275638.30, 41466.69, 75747.53],
      areaStyle: { color: 'rgba(64,158,255,0.15)' },
      itemStyle: { color: '#409EFF' },
      lineStyle: { color: '#409EFF' },
      label: {
        show: true,
        position: 'top',
        formatter: (params: any) => params.value.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
      },
      symbol: 'circle',
      symbolSize: 10
    }
  ]
})
const chartOption = ref({
  tooltip: { trigger: 'axis' },
  legend: { data: ['订单数量'] },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['2024年03月', '2024年04月', '2024年05月', '2024年06月', '2024年07月']
  },
  yAxis: { type: 'value' },
  series: [
    {
      name: '订单数量',
      type: 'line',
      smooth: true,
      data: [100, 370, 240, 100, 302],
      areaStyle: { color: 'rgba(64,158,255,0.15)' },
      itemStyle: { color: '#409EFF' },
      lineStyle: { color: '#409EFF' }
    }
  ]
})
</script>
<style scoped>
.wms-layout {
  height: 100vh;
  background: #f5f7fa;
}

.wms-aside {
  background: #f5f7fa;
  border-right: 1px solid #e4e7ed;
  min-height: 100vh;
  overflow-y: auto;
}

.wms-main {
  padding: 0;
  background: #f8f9fa;
  min-height: 100vh;
}

.dashboard-panel {
  background: #fff;
  border-radius: 8px;
  margin: 24px;
  padding: 24px 24px 12px 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.dashboard-header2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  border-bottom: 2px solid #e4e7ed;
  padding-bottom: 10px;
}

.dashboard-title {
  color: #409EFF;
  font-size: 2.2rem;
  font-weight: bold;
}

.dashboard-logo {
  font-size: 2rem;
  color: #b3d8fd;
  font-weight: bold;
  letter-spacing: 2px;
}

.stat-card {
  margin-bottom: 18px;
  min-height: 110px;
}

.stat-title {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.info-icon {
  color: #67c23a;
  margin-left: 4px;
  font-size: 1rem;
}

.stat-value {
  color: #409EFF;
  font-size: 2.1rem;
  font-weight: bold;
  margin-top: 6px;
  display: inline-block;
}

.stat-unit {
  font-size: 1.1rem;
  color: #409EFF;
  margin-left: 2px;
}

.chart-card {
  min-height: 370px;
}

.chart-title {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 8px;
}
</style>